<template>
	<div class="layout-padding">
		<splitpanes>
			<pane size="20">
				<div class="layout-padding-auto layout-padding-view">
					<div class="flex justify-between items-center">
						<div class="flex gap-2 w-full">
							<el-button
								class="font-bold"
								:class="btnIndex === index ? 'btnActive' : ''"
								style="font-size: 16px"
								v-for="(item, index) in catalogueList"
								:key="item.name"
								@click="handleChange(index)"
								>{{ item.name }}</el-button
							>
						</div>
					</div>
					<el-scrollbar class="mt-2">
						<div class="flex h-10 items-center justify-between">
							<span class="font-bold pl-2" style="font-size: 16px">图层目录</span>
							<el-button icon="Plus" v-if="btnIndex === 1" type="primary" @click="handleAddGroup">分组</el-button>
						</div>
						<el-tree
							ref="treeRef"
							:data="dataList"
							node-key="id"
							:filter-node-method="filterNode"
							:props="defaultProps"
							accordion
							@node-click="handleNodeClick"
							v-if="btnIndex === 1"
						>
							<template #default="{ node, data }">
								<div
									:class="activeNode == data.projectNameCh ? 'actived' : ''"
									class="w-full flex justify-between items-center"
									@click="handleFilter(node, data)"
								>
									<span>{{ data.projectNameCh ? data.projectNameCh : '全部' }}</span>
									<div class="flex gap-2" v-if="data.projectNameCh">
										<el-icon class="cursor-pointer" @click.stop="handleEditGroup(data)"><Edit /></el-icon>
										<el-icon class="cursor-pointer" @click.stop="handleDelGroup(data)"><Delete /></el-icon>
									</div>
								</div>
							</template>
						</el-tree>
						<el-tree node-key="id" :load="treeLoad" lazy ref="tree" :props="defaultProps2" @node-click="changeClick" v-if="btnIndex === 0" />
					</el-scrollbar>
				</div>
			</pane>
			<pane class="ml8">
				<div class="layout-padding-auto layout-padding-view" v-if="btnIndex === 1">
					<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
						<el-form-item prop="layerNameCh" label="图层名称">
							<el-input placeholder="请输入图层名称查询" clearable style="max-width: 180px" v-model="state.queryForm.layerNameCh" />
						</el-form-item>
						<el-form-item prop="label" label="标签">
							<el-input placeholder="请输入标签内容查询" clearable style="max-width: 180px" v-model="state.queryForm.label" />
						</el-form-item>
						<el-form-item prop="dataSourceType" label="类型">
							<el-select v-model="state.queryForm.dataSourceType" placeholder="请选择类型">
								<el-option v-for="item in tabList" :key="item.value" :label="item.text" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="dataType" label="格式">
							<el-select v-model="state.queryForm.dataType" placeholder="请选择格式">
								<el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item prop="createTime" label="创建时间">
							<el-date-picker
								v-model="timeArr"
								type="daterange"
								value-format="YYYY-MM-DD HH:mm:ss"
								range-separator="-"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								@change="changeTime"
							>
							</el-date-picker>
						</el-form-item>
					</el-form>
					<div class="flex justify-between">
						<el-form-item>
							<el-button @click="opennewLayerDialog('add')" class="ml10" icon="CirclePlus" type="primary"> 创建图层 </el-button>
							<el-button @click="selectionDown" :disabled="ids.length === 0" class="ml10" icon="Plus" type="primary"> 批量上线 </el-button>
						</el-form-item>
						<el-form-item>
							<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
						</el-form-item>
					</div>
					<el-table
						ref="tableRef"
						v-loading="state.loading"
						:data="state.dataList"
						:cell-style="tableStyle.cellStyle"
						:header-cell-style="tableStyle?.headerCellStyle"
						@filter-change="filterChange"
						v-if="btnIndex === 1"
						@selection-change="handleSelectionChange"
					>
						<!-- :disabled="row.status" -->
						<el-table-column type="selection" width="55">
							<template #default="scope">
								<el-checkbox
									:model-value="scope.row.checked"
									:disabled="scope.row.status !== 0"
									@change="handleCheckboxChange(scope.row)"
								></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column prop="layerNameCh" label="图层名称" show-overflow-tooltip />
						<el-table-column prop="dataType" label="格式" :filters="dataType" column-key="dataType" :filter-multiple="false">
							<template #default="scope">
								<el-tag class="h-8" size="large">{{ filterDataType(scope.row.dataType, 'name', 'dataType') }} </el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="label" label="标签" width="230">
							<template #default="scope">
								<div class="flex gap-2 items-center justify-center">
									<el-tag size="large" v-for="item in scope.row.labelList" :key="item">{{ item }}</el-tag>
									<el-icon class="ml-2 border cursor-pointer" @click="handAddTag(scope)"><Plus /></el-icon>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="layerUrl" label="服务地址" show-overflow-tooltip>
							<template #default="scope">
								<div class="api-url" v-if="scope.row.layerUrl">
									<span class="cursor-pointer" @click="getMapInfo(scope.row)">{{ fullLayerUrl(scope.row.layerUrl) }}</span>
									<img class="cursor-pointer" src="../复制-未选中@2x.png" alt="" @click="copy(scope.row.layerUrl)" />
								</div>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="layerSourceUrl" label="图层源地址" show-overflow-tooltip>
							<template #default="scope">
								<div class="api-url" v-if="scope.row.layerSourceUrl">
									<span>{{ fullLayerUrl(scope.row.layerSourceUrl) }}</span>
									<img  src="../复制-未选中@2x.png" alt="" @click="copy(scope.row.layerSourceUrl)" />
								</div>
							</template>
						</el-table-column> -->

						<el-table-column prop="wfsUrl" label="wfs服务地址" show-overflow-tooltip>
							<template #default="scope">
								<div class="api-url" v-if="scope.row.wfsUrl">
									<span class="cursor-pointer" @click="getMapInfo(scope.row)">{{ fullLayerUrl(scope.row.wfsUrl) }}</span>
									<img class="cursor-pointer" src="../复制-未选中@2x.png" alt="" @click="copy(scope.row.wfsUrl)" />
								</div>
							</template>
						</el-table-column>

						<el-table-column prop="wmtsUrl" label="wmts服务地址" show-overflow-tooltip>
							<template #default="scope">
								<div class="api-url" v-if="scope.row.wmtsUrl">
									<span class="cursor-pointer" @click="getMapInfo(scope.row)">{{ fullLayerUrl(scope.row.wmtsUrl) }}</span>
									<img class="cursor-pointer" src="../复制-未选中@2x.png" alt="" @click="copy(scope.row.wmtsUrl)" />
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="layerRemarks" label="图层说明" show-overflow-tooltip />
						<el-table-column prop="createTime" label="发布时间" show-overflow-tooltip />
						<el-table-column prop="status" label="启用">
							<template #default="scope">
								<el-switch
									v-model="scope.row.status"
									@change="switchChange(scope.row)"
									:active-value="1"
									:inactive-value="0"
									:loading="scope.row.loading"
									class="ml-2"
									style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
								/>
							</template>
						</el-table-column>
						<el-table-column prop="date" label="操作" width="230">
							<template #default="scope">
								<el-button class="ml10 is-text" icon="edit" type="primary" @click="handleStatus(scope.row)"> 编辑 </el-button>
								<el-button class="ml10 is-text" icon="delete" type="primary" @click="handleDelete(scope.row)"> 删除 </el-button>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
				</div>

				<div class="layout-padding-auto layout-padding-view" v-if="btnIndex === 0">
					<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
						<el-form-item prop="searchKey" label="图层名称">
							<el-input placeholder="请输入图层名称查询" clearable style="max-width: 180px" v-model="state.queryForm.searchKey" />
						</el-form-item>
						<el-form-item prop="resType" label="格式">
							<el-select v-model="state.queryForm.resType" placeholder="请选择格式">
								<el-option v-for="item in resTypeList" :key="item.value" :label="item.text" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-form>
					<el-table
						ref="tableRef"
						v-loading="state.loading"
						:data="state.dataList"
						:cell-style="tableStyle.cellStyle"
						:header-cell-style="tableStyle?.headerCellStyle"
						@filter-change="filterChange"
						@selection-change="handleSelectionChange"
					>
						<!-- :disabled="row.status" -->
						<!-- <el-table-column type="selection" width="55">
							<template #default="scope">
								<el-checkbox
									:model-value="scope.row.checked"
									:disabled="scope.row.status == 0"
									@change="handleCheckboxChange(scope.row)"
								></el-checkbox>
							</template>
						</el-table-column> -->
						<el-table-column prop="layerNameCh" label="图层名称" show-overflow-tooltip />
						<el-table-column prop="resType" label="格式" column-key="dataType">
							<template #default="scope">
								<el-tag class="h-8" size="large">{{ filterRestype(scope.row.resType) }} </el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="layerUrl" label="服务地址" show-overflow-tooltip>
							<template #default="scope">
								<div class="api-url" v-if="scope.row.layerUrl">
									<span class="cursor-pointer" @click="getMapInfo(scope.row, 1)">{{ fullLayerUrl(scope.row.layerUrl) }}</span>
									<img class="cursor-pointer" v-if="scope.row.layerUrl" src="../复制-未选中@2x.png" alt="" @click="copy(scope.row.layerUrl)" />
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="layerRemarks" label="图层说明" show-overflow-tooltip />
						<el-table-column prop="publishStatus" label="发布状态">
							<template #default="scope">
								{{ scope.row.publishStatus === 1 ? '已发布' : '未发布' }}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="操作" width="230">
							<template #default="scope">
								<el-button
									class="ml10 is-text"
									icon="edit"
									type="primary"
									@click="handleRelease(scope.row)"
									v-if="!['9', '4', '10', '11'].includes(scope.row.resType)"
								>
									{{ scope.row.publishStatus === 1 ? '再发布' : '发布' }}
								</el-button>
								<!-- <el-button class="ml10 is-text" icon="delete" type="primary" @click="handleDelete(scope.row)"> 删除 </el-button> -->
							</template>
						</el-table-column>
					</el-table>
					<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
				</div>
			</pane>
		</splitpanes>
		<newLayerDialog @refresh="getDataList()" ref="newLayerDialogRef" />
		<addGroup ref="addGroupRef" @refresh="gruopInit" />

		<filerLayerDiaog ref="layertPopup" @refresh="getDataList()" />
		<addTag ref="addTagRef" @refresh="uplateTag" />
	</div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import addTag from './components/addTag.vue';
import addGroup from './components/layerManagement/addLayer.vue';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { treeDataCatalog, postAgCloud, treeDataCatalogTree, publishAgLayer } from '/@/api/project/index.ts';
import filerLayerDiaog from './components/layerGroups/filerLayerDiaog.vue';
import { useI18n } from 'vue-i18n';
const router = useRouter();

import {
	pageList,
	deleteGeoLayer,
	editStatus,
	getAllWorkSpaceList,
	updateLabel,
	updateLayerStatus,
	getGeoBoxDataInfo,
} from '/@/api/resource/layerManagement';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { delPost, editPost } from '/@/api/project';
import { useMapInfo } from '../../stores/map.ts';

let currentURL = '';
const catalogueList = ref([
	{
		name: '数生科技目录',
	},
	{
		name: '自定义目录',
	},
]);
// 引入组件
const newLayerDialog = defineAsyncComponent(() => import('./components/layerManagement/newLayerDialog.vue'));
const inputValue = ref('');
const addGroupRef = ref('');
const layertPopup = ref('');
const { t } = useI18n();

const addTagRef = ref('');
const defaultProps = ref({
	children: 'children',
	label: 'name',
});
const defaultProps2 = ref({
	children: 'children',
	label: 'name',
	isLeaf: 'isLeaf',
});
const dataList = ref([]);
const timeArr = ref([]);

// 定义变量内容
const tableRef = ref();
const queryRef = ref();
const newLayerDialogRef = ref();

const tabList = ref([
	{
		text: '基础底图',
		value: 1,
	},
	{
		text: '二维矢量',
		value: 2,
	},
	{
		text: '三维模型',
		value: 3,
	},
]);
const btnIndex = ref(0);
const dataType = ref<any[]>([
	{ text: 'Shapefile', value: '1' },
	{ text: 'Tif', value: '2' },
	{ text: '3Dtiles', value: '3' },
	{ text: 'PostGIS', value: '4' },
	{ text: 'Fbx/Glb', value: '5' },
	{ text: '瓦片地图', value: '6' },
	{ text: '地形', value: '7' },
	{ text: 'WMS服务', value: '8' },
]);

const resTypeList = ref<any[]>([
	{ text: '全部', value: -1 },
	{ text: '矢量', value: '1' },
	{ text: '栅格', value: '2' },
	{ text: '属性', value: '4' },
	{ text: '文件', value: '5' },
	{ text: 'BIM', value: '6' },
	{ text: '倾斜摄影', value: '7' },
	{ text: '精模', value: '8' },
	{ text: '点云', value: '9' },
	{ text: '粗模', value: '10' },
	{ text: '图层服务', value: '11' },
]);
const typeColor = ref<any>([
	{ background: '#c1deff', color: '#499dff' },
	{ background: '#dad7ff', color: '#826EFF' },
	{ background: '#fde3c0', color: '#499dff' },
]);
const projectOptions = computed(() => {
	const userInfo = useUserInfo().userInfos.projectList;
	return userInfo.map((item) => ({
		text: item.label,
		value: item.value,
	}));
});

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: btnIndex.value === 1 ? {} : { catalogId: '4aec2aa0-b39d-4ae1-b805-3387aa183e89', resType: -1 },
	pageList: computed(() => (btnIndex.value === 1 ? pageList : postAgCloud)),
	props: {
		item: 'records',
		totalCount: 'total',
	},
});
const treeRef = ref();
const filterDataType = (type: string, key: any, name: any) => {
	if (name == 'dataType') {
		const formatName = dataType.value.find((item) => item.value == type);
		return formatName ? formatName.text : '';
	} else {
		return dataType.value.find((item) => item.value == row.dataType).text;
	}
};
const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);

const serviceList = ref([
	{
		label: '上线',
		value: 1,
	},
	{
		label: '未上线',
		value: 2,
	},
]);

const serviceTypeList = ref([
	{
		label: '数据服务',
		value: 2,
	},
	{
		label: '数据表',
		value: 1,
	},
]);
// 过滤筛选列表
const filterChange = (filter) => {
	if (filter['dataType']) {
		state.queryForm.dataType = filter.dataType.join(',');
		getDataList();
	} else if (filter['dataSourceType']) {
		state.queryForm.dataSourceType = filter.dataSourceType.join(',');
		getDataList();
	} else if (filter['publishStatus']) {
		state.queryForm.publishStatus = filter.publishStatus.join(',');
		getDataList();
	}
};
const resetQuery = () => {
	state.queryForm = {
		catalogId: btnIndex.value === 1 ? null : '4aec2aa0-b39d-4ae1-b805-3387aa183e89',
		resType: btnIndex.value === 1 ? null : -1,
	};
	if (btnIndex.value == 1) {
		state.queryForm = {};
	}

	timeArr.value = [];
	getDataList();
};
const ids = ref([]);
async function switchChange(item) {
	try {
		await updateLayerStatus([item.layerManagerId]);
		useMessage().success('修改成功');
		getDataList();
	} catch (error) {}
}
function changeClick(val) {
	state.queryForm.catalogId = val.id;
	getDataList();
}
function filterRestype(name) {
	return resTypeList.value.find((item) => item.value == name)?.text;
}
// 打开图层弹窗
const opennewLayerDialog = async (type?: string) => {
	newLayerDialogRef.value.openDialog(type, { dataType: activeDataType.value });
};
const tree = ref();
//切换图层
function handleChange(index) {
	btnIndex.value = index;
	if (btnIndex.value == 1) {
		delete state.queryForm.catalogId;
		delete state.queryForm.resType;
	} else {
		state.queryForm = { catalogId: '4aec2aa0-b39d-4ae1-b805-3387aa183e89', resType: -1 };
	}
	getDataList();
}
function changeTime(time) {
	state.queryForm.startTime = time[0];
	state.queryForm.endTime = time[1];
}
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await deleteGeoLayer({
			layerName: row.layerName,
			dataType: row.dataType,
			wokeSpaceName: row.nameSpace,
			serviceType: row.serviceType,
			layerManagerId: row.layerManagerId,
		});
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		// useMessage().error(err.msg);
	}
};
async function handleRelease(row) {
	const { layerName, resType, resCode, fileName } = row;
	try {
		const { code } = await publishAgLayer({ layerName, resType, resCode, fileName });
		if (code === 0) {
			useMessage().success('发布成功');
		}
		getDataList();
	} catch (error) {}
}
let activeNode = ref(null);
let activeDataType = ref(null);
function handleNodeClick(data) {
	nextTick(() => {
		activeDataType.value = data.wokeSpaceName;
		activeNode.value = data.projectNameCh;
	}); // 更新当前选中的节点ID
}
function handleFilter(node, data) {
	state.queryForm.wokeSpaceName = data.wokeSpaceName || '';
	getDataList();
}
async function getTreeDataCatalog(id) {
	let arr = [];
	const { data } = await treeDataCatalog({ catalogId: id });
	arr = data.map((item) => {
		return {
			name: item.name,
			id: item.id,
		};
	});
	return arr;
}
const treeLoad = async (node, resolve: (data) => void) => {
	if (node.level === 0) {
		const { data } = await treeDataCatalogTree();
		resolve(
			data.map((item) => {
				return {
					name: item.name,
					id: item.id,
				};
			})
		);
		nextTick();
		data.forEach((item) => {
			const targetNode = tree.value?.getNode(item.id);
			if (targetNode) {
				targetNode.expand(); // 触发二级加载
			}
		});
	} else {
		const data = await getTreeDataCatalog(node.data.id);
		resolve(data);
	}
};
// 发布二维 三维
const handleStatus = (row: any) => {
	layertPopup.value.openDialog(row);
	layertPopup.value.reset();
};

const query = () => {
	state.dataList = [];
	getDataList();
};
function handleAddGroup(data) {
	addGroupRef.value.openDialog({ title: '创建图层目录' });
}
async function handleDelGroup(data) {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		let response = await delPost({ wokeSpaceName: data.wokeSpaceName });
		gruopInit();
		getDataList();
		if (response.code === 0) {
			useMessage().success('删除成功');
		}
	} catch (error) {}
}
async function handleEditGroup(res) {
	addGroupRef.value.openDialog({ queryForm: res, title: '编辑图层目录' });
}
const fullLayerUrl = (url) => {
	return `${window.location.origin}/zsxw-city-api-dev${url}`;
};

const filterNode = (value, data) => {
	if (!value) return true;
	return data.projectNameCh.includes(value);
};

let activeId = ref();
function handAddTag(scope) {
	if (scope.row.labelList) {
		addTagRef.value.openDialog({ tagList: scope.row.labelList, id: scope.row.id });
	} else {
		addTagRef.value.openDialog({ id: scope.row.id });
	}
	activeId.value = scope.row.layerManagerId;
}

async function uplateTag(tagArr) {
	let data = {
		id: activeId.value,
		firstLabel: tagArr.tagList[0],
		secondLabel: tagArr.tagList[1],
		thirdLabel: tagArr.tagList[2],
	};

	try {
		await updateLabel(data);
		useMessage().success('标签修改成功');
		getDataList();
	} catch (error) {}
}
function gruopInit(params: type) {
	getAllWorkSpaceList({ wokeSpaceName: '' }).then((res) => {
		let { data } = res;
		dataList.value = data;
		if (dataList.value) {
			dataList.value.unshift({ id: '全部', name: '全部', children: [] });
		}
	});
}
gruopInit();
const handleCheckboxChange = (row) => {
	if (row.status !== 1) {
		row.checked = !row.checked;
	}
};
// 批量上线
const handleSelectionChange = (arr: any) => {
	ids.value = arr.map((item) => {
		return item.layerManagerId;
	});
};

function selectionDown() {
	updateLayerStatus(ids.value).then((res) => {
		useMessage().success(res.data);
		getDataList();
	});
}

const copy = async (url) => {
	let text = fullLayerUrl(url);

	const textarea = document.createElement('textarea');
	textarea.value = text;
	document.body.appendChild(textarea);
	textarea.select();

	try {
		// 尝试执行复制操作
		const success = document.execCommand('copy');
		if (success) {
			useMessage().success('复制成功');
		} else {
			useMessage().error('复制失败');
		}
	} catch (error) {
		useMessage().error('复制失败');
	}
	document.body.removeChild(textarea);
};

const getMapInfo = async (row: any, flag) => {
	if (row.publishStatus == 0) {
		useMessage().error('图层未发布');
		return;
	}
	if (row.hasData == 0 && row.dataType == 4) {
		useMessage().error('无法预览图层，原因：图层数据表中无任何记录。请检查数据库中的数据完整性后再进行操作');
		return;
	}
	if (flag === 1) {
		let position = {
			latLonBoxMaxX: row.latLonBoxMaxX,
			latLonBoxMaxY: row.latLonBoxMaxY,
			latLonBoxMinX: row.latLonBoxMinX,
			latLonBoxMinY: row.latLonBoxMinY,
			layerName: row.layerName,
			dataSourceType: row.dataSourceType,
			dataType: resTypeList.value.find((item) => item.value == row.dataType).text,
			layerkey: row.layerKey,
			styleName: row.styleName,
			srs: row.srs,
		};
		localStorage.setItem(
			'mapInfo',
			JSON.stringify({
				url: fullLayerUrl(row.layerUrl),
				position,
			})
		);
		window.open('/zsxw-city/dataMap', '_blank');
		return;
	}
	try {
		const { data } = await getGeoBoxDataInfo(row.layerManagerId);
		let position = {
			latLonBoxMaxX: data.latLonBoxMaxX,
			latLonBoxMaxY: data.latLonBoxMaxY,
			latLonBoxMinX: data.latLonBoxMinX,
			latLonBoxMinY: data.latLonBoxMinY,
			layerName: data.layerName,
			dataSourceType: data.dataSourceType,
			dataType: filterDataType(row.dataType, 'name', 'dataType'),
			layerkey: row.layerKey,
			styleName: row.styleName,
			srs: row.srs,
		};

		if (data.dataType == '2') {
			useMessage().error('不支持预览');
			return;
		}
		localStorage.setItem(
			'mapInfo',
			JSON.stringify({
				url: fullLayerUrl(row.layerUrl),
				position,
			})
		);
		window.open('/zsxw-city/dataMap', '_blank');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
	}
};
</script>
<style lang="scss" scoped>
.el-tree {
	font-size: 16px;
}
.api-url {
	display: flex;
	span {
		color: #527dda;
		width: 160px;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	img {
		width: 16px;
		height: 16px;
	}
}

.actived {
	width: 100%;
	background: #b0beda30;
}
.btnActive {
	background-color: #3156a5;
	color: #fff;
}
</style>
